<template>
    <div class="minW1060-auto bg-fff mt10">
        <div class="pad20 ml10">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/work' }">职务管理</el-breadcrumb-item>
                <el-breadcrumb-item>职务编辑</el-breadcrumb-item>
            </el-breadcrumb>
            <el-row>

                <el-col align="right">
                    <div class="dlblock-mb20 pr10 ml20">
                        <el-button type="primary" @click="insertDutiesManagementFn('dutiesManagement')">保存</el-button>
                    </div>
                    <div class="dlblock-mb20 pr10">
                        <el-button type="danger" @click="resetForm('dutiesManagement')">重置</el-button>
                    </div>
                </el-col>
            </el-row>

            <el-row>
                <el-col align="left">
                    <h1>基本信息</h1>
                </el-col>
            </el-row>

            <el-row :gutter="30" class="mt20">
                <el-form label-position="left" label-width="80px" :model="dutiesManagement"
                         ref="dutiesManagement">
                    <el-row>
                        <el-col :span="6" :offset="1">
                            <el-form-item label="所属分组" prop="groupId" :rules="required">
                                <el-cascader
                                        v-model="dutiesManagement.groupId"
                                        :options="groupTree"
                                        :props="{value: 'id', label: 'name', checkStrictly: true,expandTrigger:'hover'}"
                                        style="width: 343px;"
                                        :show-all-levels="false"
                                        clearable
                                        placeholder="请选择"
                                >
                                </el-cascader>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" :offset="1">
                            <el-form-item label="职务名称" prop="name" :rules="required">
                                <el-input v-model.trim="dutiesManagement.name" placeholder="请输入内容" :maxlength="20" show-word-limit
                                          clearable @input="getAbbr"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6" :offset="1">
                            <el-form-item label="名称拼音" prop="pinyin" :rules="required">
                                <el-input v-model.trim="dutiesManagement.pinyin" placeholder="请输入内容" :maxlength="20" show-word-limit
                                          clearable></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" :offset="1">
                            <el-form-item label="拼音缩写" prop="abbr" :rules="required">
                                <el-input v-model.trim="dutiesManagement.abbr" placeholder="请输入内容" :maxlength="20" show-word-limit
                                          clearable></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6" :offset="1">
                            <el-form-item label="所属部门" prop="deptId" :rules="required">
                                <el-select v-model="dutiesManagement.deptId" filterable placeholder="请选择" clearable
                                           style="width: 343px">
                                    <el-option v-for="(item,index) in department"
                                               :key="index"
                                               :label="item.name"
                                               :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" :offset="1">
                            <el-form-item label="职务描述" prop="remarks">
                                <el-input v-model.trim="dutiesManagement.remarks" placeholder="请输入内容" :maxlength="30" show-word-limit
                                          clearable></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-row>
        </div>
    </div>
</template>

<script>
    import {insertDutiesManagement, getDepartments, getGroupTree} from '@/api'
    import {} from '@/utils/config'
    import vPinyin from "../../../../utils/vue-py";

    export default {
        name: "index1",
        data() {
            return {
                group: '',
                groupTree: [],
                dutiesManagement: {
                    dutieId: '',
                    groupName: '',
                    groupId: '',
                    countPeople: '',
                    name: '',
                    remarks: '',
                    deptId: '',
                    deptName: '',
                    pinyin: '',
                    abbr: '',
                },
                index: '',
                department: [],
                required: {
                    required: true,
                    message: '此输入框必填',
                    trigger: 'blur'
                },
            };
        },
        created() {
            this.getDepartmentsFn();
            this.getGroupTreeFn();
            if (this.$route.query.dutiesManagement) {
                this.dutiesManagement = this.$route.query.dutiesManagement
            }
            this.group = this.dutiesManagement.groupId
        },


        methods: {

            //拼音缩写
            getAbbr() {
                this.dutiesManagement.pinyin = vPinyin.chineseToPinYin(this.dutiesManagement.name)
                let SX = '';
                for (var i = 0; i < this.dutiesManagement.pinyin.length; i++) {
                    var c = this.dutiesManagement.pinyin.charAt(i);
                    if (/^[A-Z]+$/.test(c)) {
                        SX += c;
                    }
                }
                this.dutiesManagement.abbr = SX;
            },

            //添加或修改职务信息
            insertDutiesManagementFn(formName) {
                if (this.dutiesManagement.groupId.hasOwnProperty('length')) {
                    if (this.dutiesManagement.groupId.length != 0) {
                        this.dutiesManagement.groupId = this.dutiesManagement.groupId[this.dutiesManagement.groupId.length - 1]
                    }
                }
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        insertDutiesManagement({
                            dutieId: this.dutiesManagement.dutieId,
                            groupId: this.dutiesManagement.groupId,
                            name: this.dutiesManagement.name,
                            remarks: this.dutiesManagement.remarks,
                            deptId: this.dutiesManagement.deptId,
                            pinyin: this.dutiesManagement.pinyin,
                            abbr: this.dutiesManagement.abbr,
                        }).then(res => {
                            if (res.code == 200) {
                                this.$message.success("保存成功")
                                this.$router.push("/work")
                                this.$store.dispatch('tagsView/delView', {path: '/work/edit'})
                            }
                        }).catch(err => {
                            this.$message.error("保存失败")
                        })
                    } else {
                        return false;
                    }
                });
            },
            //查询部门
            getDepartmentsFn() {
                getDepartments({}).then(res => {
                    if (res.code == 200) {
                        this.department = res.data
                    }
                })
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            getGroupTreeFn() {
                getGroupTree({}).then(res => {
                    if (res.code == 200) {
                        this.groupTree = res.data.children
                    }
                })
            },

        }
    }
</script>

<style scoped>

</style>
